<!-- hbox layout -->
<div class="hbox hbox-auto-xs bg-light " ng-init="
  app.settings.asideFixed = true;
  app.settings.asideDock = false;
  app.settings.container = false;
  app.hideAside = false;
  app.hideFooter = true;
  " ng-controller="NoteCtrl">

  <!-- column -->
  <div class="col w lt b-r" >
    <div class="vbox">
      <div class="wrapper b-t m-t-xxs">
        <div class="input-group">
          <span class="input-group-addon input-sm"><i class="fa fa-search"></i></span>
          <input type="text" class="form-control input-sm" placeholder="搜索" ng-model="query">
        </div>
      </div>
      <div class="row-row">
        <div class="cell scrollable hover">
          <div class="cell-inner">
            <div class="list-group">
              <!-- <a class="list-group-item b-l-success b-l-5x hover-anchor">
                <span class="block text-ellipsis">所有房舍</span>
              </a> -->
              <a ng-repeat="note in notes | filter:query | orderBy:'date':true" class="list-group-item b-l-success b-l-5x hover-anchor" ng-class="{'hover': note.selected }" ng-click="selectNote(note)">

                <span class="block text-ellipsis">- &nbsp;<i class="glyphicon glyphicon-home m-r-xs"></i>{{ note.content ? note.content : 'Empty note' }}</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- /column -->

  <!--column -->
  <div class="col">
    <div class="vbox">
      <div class="row-row">
        <div class="cell">
          <div class="cell-inner">

            <!--main -->
            <!-- main -->
            <div class="col">
              <!-- main header -->
              <div class="bg-light lter b-b wrapper">
                <div class="row">
                  <div class="col-xs-12">
                    <!-- breadcrumb -->
                    <div>
                      <h4 class="m-n text-black" >{{note.content}}</h4>
                      <ul class="breadcrumb no-padder m-b-none m-t-sm no-bg">
                        <li><a ui-sref="app.farm"><i class="icon-arrow-left m-r-sm"></i>全部</a></li>
                        <li class="active">房舍详情</li>
                      </ul>
                    </div>
                    <!-- / breadcrumb -->
                  </div>
                </div>
              </div>
              <!-- / main header -->
              <div class="wrapper-xs">
                <!-- stats -->
                <div class="row">
                  <div class="col-md-7">
                    <div class="panel wrapper">
                      <label class="i-switch bg-warning pull-right" ng-init="showSpline=true">
                        <input type="checkbox" ng-model="showSpline">
                        <i></i>
                      </label>
                      <h4 class="font-thin m-t-none m-b text-muted">视频监控</h4>
                      <div ui-jq="plot" style="height:256px" >
                      </div>
                    </div>
                  </div>

                  <div class="col-md-5">
                    <div class="row row-sm text-center">

                      <div class="col-xs-12 m-b-md">
                        <div class="r bg-light dker item hbox no-border">
                          <div class="col w-xs v-middle hidden-md">
                            <div ng-init="data1=[60,40]" ui-jq="sparkline" ui-options="{{data1}}, {type:'pie', height:40, sliceColors:['{{app.color.warning}}','#fff']}" class="sparkline inline"></div>
                          </div>
                          <div class="col dk padder-v r-r">
                            <div class="text-primary-dk font-thin h1"><span>28</span></div>
                            <span class="text-muted text-base">当前天龄</span>
                          </div>
                        </div>
                      </div>

                      <div class="col-xs-6">
                        <div class="panel padder-v item">
                          <div class="text-info font-thin h2">21<h4 class="inline">&nbsp;℃</h4></div>
                          <span class="text-muted text-base">舍内温度</span>
                          <div class="top text-right w-full">
                            <i class="fa fa-caret-down text-warning m-r-sm"></i>
                          </div>
                        </div>
                      </div>
                      <div class="col-xs-6">
                        <div class="panel padder-v item">
                          <span class="text-info font-thin h2 block">76.6<h4 class="inline">&nbsp;%Rh</h4></span>
                          <span class="text-muted text-base">湿度</span>
                          <span class="bottom text-right w-full">
                            <i class="fa fa-cloud-upload text-muted m-r-sm"></i>
                          </span>
                        </div>
                      </div>
                      <div class="col-xs-6">
                        <div class="panel padder-v item">
                          <span class="text-info font-thin h2 block">1.6<h4 class="inline">&nbsp;ppm</h4></span>
                          <span class="text-muted text-base">氨气浓度</span>
                          <span class="top text-left">
                            <i class="fa fa-caret-up text-warning m-l-sm"></i>
                          </span>
                        </div>
                      </div>
                      <div class="col-xs-6">
                        <div class="panel padder-v item">
                          <div class="text-info font-thin h2">129<h4 class="inline">&nbsp;Lux</h4></div>
                          <span class="text-muted text-base">光照强度</span>
                          <div class="bottom text-left">
                            <i class="fa fa-caret-up text-warning m-l-sm"></i>
                          </div>
                        </div>
                      </div>

                    </div>
                  </div>

                </div>
                <!-- / stats -->

                <!-- tasks -->
                <div class="panel wrapper">
                  <div class="row">

                      <div class="col-xs-2">
                        <a href class="block panel padder-v bg-info item text-center">
                          <span class="text-white font-thin h1 block"><i class="icon-star"></i></span>
                          <span class="text-muted text-base">风机</span>
                        </a>
                      </div>
                    <div class="col-xs-2">
                      <a href class="block panel padder-v bg-info item text-center">
                        <span class="text-white font-thin h1 block"><i class="icon-star"></i></span>
                        <span class="text-muted text-base">风机</span>
                      </a>
                    </div>
                    <div class="col-xs-2">
                      <a href class="block panel padder-v bg-info item text-center">
                        <span class="text-white font-thin h1 block"><i class="icon-star"></i></span>
                        <span class="text-muted text-base">风机</span>
                      </a>
                    </div>
                    <div class="col-xs-2">
                      <a href class="block panel padder-v bg-info item text-center">
                        <span class="text-white font-thin h1 block"><i class="icon-star"></i></span>
                        <span class="text-muted text-base">风机</span>
                      </a>
                    </div>
                    <div class="col-xs-2">
                      <a href class="block panel padder-v bg-info item text-center">
                        <span class="text-white font-thin h1 block"><i class="icon-star"></i></span>
                        <span class="text-muted text-base">风机</span>
                      </a>
                    </div>
                    <div class="col-xs-2">
                      <a href class="block panel padder-v bg-info item text-center">
                        <span class="text-white font-thin h1 block"><i class="icon-star"></i></span>
                        <span class="text-muted text-base">风机</span>
                      </a>
                    </div>
                    <div class="col-xs-2">
                      <a href class="block panel padder-v bg-info item text-center">
                        <span class="text-white font-thin h1 block"><i class="icon-star"></i></span>
                        <span class="text-muted text-base">风机</span>
                      </a>
                    </div>
                    <div class="col-xs-2">
                      <a href class="block panel padder-v bg-info item text-center">
                        <span class="text-white font-thin h1 block"><i class="icon-star"></i></span>
                        <span class="text-muted text-base">风机</span>
                      </a>
                    </div>
                    <div class="col-xs-2">
                      <a href class="block panel padder-v bg-info item text-center">
                        <span class="text-white font-thin h1 block"><i class="icon-star"></i></span>
                        <span class="text-muted text-base">风机</span>
                      </a>
                    </div>
                    <div class="col-xs-2">
                      <a href class="block panel padder-v bg-info item text-center">
                        <span class="text-white font-thin h1 block"><i class="icon-star"></i></span>
                        <span class="text-muted text-base">风机</span>
                      </a>
                    </div>
                    <div class="col-xs-2">
                      <a href class="block panel padder-v bg-info item text-center">
                        <span class="text-white font-thin h1 block"><i class="icon-star"></i></span>
                        <span class="text-muted text-base">风机</span>
                      </a>
                    </div>
                    <div class="col-xs-2">
                      <a href class="block panel padder-v bg-info item text-center">
                        <span class="text-white font-thin h1 block"><i class="icon-star"></i></span>
                        <span class="text-muted text-base">风机</span>
                      </a>
                    </div>

                  </div>
                </div>
                <!-- / tasks -->

              </div>
            </div>
            <!-- / main -->

        <!-- right col -->
        <div class="col w-md bg-white-only b-l bg-auto no-border-xs">
              <tabset class="nav-tabs-alt" justified="true">
                <tab>
                  <tab-heading>
                    <i class="glyphicon glyphicon-user text-md wrapper-sm"></i><span class="block">环控</span>
                  </tab-heading>
                  <div class="panel panel-default">
                    <div class="list-group no-radius alt">
                      <span class="list-group-item text-md wrapper-xs text-center">NM-410环境控制器</span>
                      <span class="list-group-item text-success-dk">
                        <a><i class="fa fa-gear fa-fw text-muted pull-right"></i></a>
                        设备在线
                      </span>
                      <a class="list-group-item" href>
                        <span class="label bg-light pull-right text-sm">隧道通风</span>通风模式
                      </a>
                      <a class="list-group-item" href>
                        <span class="badge bg-info  text-sm">1</span>通风等级
                      </a>
                      <a class="list-group-item" href>
                        <span class="text-success text-md pull-right">25℃</span>目标温度
                      </a>
                      <a class="list-group-item" href>
                        <span class="text-success text-md pull-right">25℃</span>温度传感器1
                      </a>
                      <a class="list-group-item" href>
                        <span class="text-success text-md pull-right">25℃</span>温度传感器2
                      </a>
                      <a class="list-group-item" href>
                        <span class="text-success text-md pull-right">25℃</span>温度传感器3
                      </a>
                      <a class="list-group-item" href>
                        <span class="text-success text-md pull-right">25℃</span>温度传感器4
                      </a>
                      <a class="list-group-item" href>
                        <span class="text-success text-md pull-right">25℃</span>温度传感器5
                      </a>
                      <a class="list-group-item" href>
                        <span class="text-success text-md pull-right">25℃</span>温度传感器6
                      </a>
                      <a class="list-group-item" href>
                        <span class="text-success text-md pull-right">25℃</span>
                        <i class="glyphicon glyphicon-home m-r-xs text-muted"></i>舍外温度
                      </a>

                    </div>
                  </div>
                </tab>
                <tab>
                  <tab-heading>
                    <i class="glyphicon glyphicon-comment text-md wrapper-sm"></i><span class="block">料线</span>
                  </tab-heading>
                  <div class="panel panel-default">
                    <div class="list-group no-radius alt">
                      <span class="list-group-item text-md wrapper-xs text-center">料线控制器</span>
                      <span class="list-group-item text-success-dk">
                        <a><i class="fa fa-gear fa-fw text-muted pull-right"></i></a>
                        设备在线
                      </span>
                      <a class="list-group-item" href>
                        <span class="label bg-light pull-right text-sm">隧道通风</span>通风模式
                      </a>
                      <a class="list-group-item" href>
                        <span class="badge bg-info  text-sm">1</span>通风等级
                      </a>
                      <a class="list-group-item" href>
                        <span class="text-success text-md pull-right">25℃</span>目标温度
                      </a>
                      <a class="list-group-item" href>
                        <span class="text-success text-md pull-right">25℃</span>温度传感器1
                      </a>
                      <a class="list-group-item" href>
                        <span class="text-success text-md pull-right">25℃</span>温度传感器2
                      </a>
                      <a class="list-group-item" href>
                        <span class="text-success text-md pull-right">25℃</span>温度传感器3
                      </a>
                      <a class="list-group-item" href>
                        <span class="text-success text-md pull-right">25℃</span>温度传感器4
                      </a>
                      <a class="list-group-item" href>
                        <span class="text-success text-md pull-right">25℃</span>温度传感器5
                      </a>
                      <a class="list-group-item" href>
                        <span class="text-success text-md pull-right">25℃</span>温度传感器6
                      </a>
                      <a class="list-group-item" href>
                        <span class="text-success text-md pull-right">25℃</span>
                        <i class="glyphicon glyphicon-home m-r-xs text-muted"></i>舍外温度
                      </a>

                    </div>
                  </div>
                </tab>
                <tab>
                  <tab-heading>
                    <i class="glyphicon glyphicon-transfer text-md wrapper-sm"></i><span class="block">饲喂</span>
                  </tab-heading>
                  <div class="wrapper-xs">
                    <div class="m-b-sm text-md">母猪饲喂器</div>
                    <ul class="list-group list-group-sm list-group-sp list-group-alt auto m-t">
                      <li class="list-group-item">
                        <span class="text-muted">Transfer to Jacob at 3:00 pm</span>
                        <span class="block text-md text-info">B 15,000.00</span>
                      </li>
                      <li class="list-group-item">
                        <span class="text-muted">Got from Mike at 1:00 pm</span>
                        <span class="block text-md text-primary">B 23,000.00</span>
                      </li>
                      <li class="list-group-item">
                        <span class="text-muted">Sponsored ORG at 9:00 am</span>
                        <span class="block text-md text-warning">B 3,000.00</span>
                      </li>
                      <li class="list-group-item">
                        <span class="text-muted">Send to Jacob at 8:00 am</span>
                        <span class="block text-md">B 11,000.00</span>
                      </li>
                    </ul>
                  </div>
                </tab>
              </tabset>
            </div>
            <!-- / right col -->


          </div>
        </div>
      </div>
    </div>
  </div>

</div>


<!-- /hbox layout -->